<template>
  <view class="container">
    <!-- 顶部logo区域 -->
    <view class="logo-container">
      <view class="logo">
        <text class="logo-text">小程序</text>
      </view>
      <view class="slogan">便捷生活，从此开始</view>
    </view>

    <!-- 登录方式切换 -->
    <view class="login-tabs">
      <view
          class="tab {{activeTab === 'password' ? 'active' : ''}}"
          @click="activeTab = 'password'">
        账号密码登录
      </view>
      <view
          class="tab {{activeTab === 'sms' ? 'active' : ''}}"
          @click="activeTab = 'sms'">
        短信验证码登录
      </view>
    </view>

    <!-- 表单区域 -->
    <view class="form-container">
      <view class="input-wrapper">
        <!-- 账号密码登录的用户名输入框 -->
        <view v-if="activeTab === 'password'" class="input-group">
          <view class="input-icon">👤</view>
          <input
              type="text"
              placeholder="请输入用户名"
              v-model="formData.username"
              placeholder-class="input-placeholder" />
        </view>

        <!-- 短信登录的手机号输入框 -->
        <view v-if="activeTab === 'sms'" class="input-group">
          <view class="input-icon">📞</view>
          <input
              type="number"
              placeholder="请输入手机号"
              v-model="formData.phone"
              placeholder-class="input-placeholder" />
        </view>

        <!-- 密码登录的密码输入框 -->
        <view v-if="activeTab === 'password'" class="input-group">
          <view class="input-icon">🔑</view>
          <input
              type="password"
              placeholder="请输入密码"
              v-model="formData.password"
              placeholder-class="input-placeholder" />
        </view>

        <!-- 短信登录的验证码输入框 -->
        <view v-if="activeTab === 'sms'" class="input-group code-group">
          <view class="input-icon">🔢</view>
          <input
              type="number"
              placeholder="请输入验证码"
              v-model="formData.code"
              placeholder-class="input-placeholder" />
          <view
              class="get-code-btn {{countdown > 0 ? 'disabled' : ''}}"
              @click="getCode">
            {{countdown > 0 ? `${countdown}s后重发` : '获取验证码'}}
          </view>
        </view>
      </view>

      <!-- 记住密码选项 -->
      <view v-if="activeTab === 'password'" class="remember-me">
        <checkbox-group @change="onRememberMeChange">
          <checkbox value="remember" checked="{{rememberMe}}">记住密码</checkbox>
        </checkbox-group>
      </view>

      <!-- 登录按钮 -->
      <button class="login-btn" @click="login">
        <text class="login-btn-text">登录</text>
      </button>

      <!-- 注册/忘记密码 -->
      <view class="extra-options">
        <navigator url="/pages/register/register">注册账号</navigator>
        <navigator url="/pages/reset-password/reset-password">忘记密码?</navigator>
      </view>
    </view>
  </view>
</template>

<script>
import {loginByPassword} from '@/apis/loginApI'
export default {
  data() {
    return {
      activeTab: 'password', // 默认密码登录
      formData: {
        username: '', // 用户名（用于账号密码登录）
        password: '', // 密码（用于账号密码登录）
        phone: '', // 手机号（仅用于短信登录）
        code: '' // 验证码（仅用于短信登录）
      },
      countdown: 0, // 验证码倒计时
      rememberMe: false // 是否记住密码
    }
  },
  onLoad() {
    // 尝试从本地存储获取记住的用户名和密码
    const savedLoginInfo = uni.getStorageSync('savedLoginInfo');
    if (savedLoginInfo) {
      this.formData.username = savedLoginInfo.username || '';
      this.formData.password = savedLoginInfo.password || '';
      this.rememberMe = !!savedLoginInfo.password;
    }
  },
  methods: {
    // 获取验证码（仅短信登录时使用）
    getCode() {
      // 验证手机号格式
      if (!this.validatePhone()) return;

      // 开始倒计时
      this.countdown = 60;
      const timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(timer);
        }
      }, 1000);

      // 调用获取验证码的API（实际项目中替换为真实接口）
      console.log('获取验证码，手机号：', this.formData.phone);
      uni.showToast({
        title: '验证码已发送',
        icon: 'none'
      });
    },

    // 登录方法
    login() {
      if (this.activeTab === 'password') {
        // 账号密码登录验证
        if (!this.formData.username) {
          uni.showToast({
            title: '请输入用户名',
            icon: 'none'
          });
          return;
        }
        if (!this.formData.password) {
          uni.showToast({
            title: '请输入密码',
            icon: 'none'
          });
          return;
        }
        console.log('账号密码登录，用户名：', this.formData.username, '密码：', this.formData.password);
        // 调用登录接口
        loginByPassword(this.formData.username, this.formData.password)
            .then(res=>{
              console.log('登录成功', res.data);
              // 登录成功后可添加跳转逻辑，例如：
              if (res.data.code === 200) {
                // 1. 保存用户信息到本地存储
                const userInfo = res.data.data; // 后端返回的User对象
                uni.setStorageSync('userInfo', userInfo); // 持久化存储
                uni.showToast({ title: '登录成功', icon: 'success' });
                setTimeout(() => {
                  // 使用 switchTab 跳转到 tabbar 页面
                  uni.switchTab({ url: '/pages/home/home' });
                }, 1000);
              } else {
                uni.showToast({ title: res.data.message || '登录失败', icon: 'none' });
              }
            }).catch(err=>{
          console.log('登录失败',err);
        })
        // 记住密码逻辑
        if (this.rememberMe) {
          uni.setStorage({
            key: 'savedLoginInfo',
            data: {
              username: this.formData.username,
              password: this.formData.password
            }
          });
        } else {
          // 不记住密码时，清除本地存储的登录信息
          uni.removeStorage({
            key: 'savedLoginInfo'
          });
        }
      } else {
        // 短信验证码登录验证
        if (!this.validatePhone()) return;
        if (!this.formData.code) {
          uni.showToast({
            title: '请输入验证码',
            icon: 'none'
          });
          return;
        }
      }

      // 调用登录API（实际项目中替换为真实接口）
      // console.log('登录请求数据：', this.formData);
      // uni.showLoading({
      //   title: '登录中...',
      //   mask: true
      // });

      // 模拟登录成功（实际项目中根据接口返回结果处理）
      // setTimeout(() => {
      //   uni.hideLoading();
      //   uni.showToast({
      //     title: '登录成功',
      //     icon: 'success',
      //     duration: 2000
      //   });
      //   // 登录成功后跳转（此处为返回上一页，可根据实际需求修改）
      //   setTimeout(() => {
      //     uni.navigateBack();
      //   }, 2000);
      // }, 1000);




    },

    // 记住密码选项变更
    onRememberMeChange(e) {
      this.rememberMe = e.detail.value.includes('remember');
    },

    // 验证手机号格式
    validatePhone() {
      const phoneReg = /^1[3-9]\d{9}$/;
      if (!phoneReg.test(this.formData.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return false;
      }
      return true;
    }
  }
}
</script>

<style>
.container {
  padding: 60rpx 40rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.logo-container {
  text-align: center;
  margin-bottom: 80rpx;
}

.logo {
  width: 160rpx;
  height: 160rpx;
  background-color: #07c160;
  border-radius: 30rpx;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
}

.logo-text {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
}

.slogan {
  color: #666;
  font-size: 28rpx;
}

.login-tabs {
  display: flex;
  margin-bottom: 60rpx;
  background-color: white;
  border-radius: 16rpx;
  padding: 10rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.tab {
  flex: 1;
  text-align: center;
  font-size: 30rpx;
  color: #666;
  padding: 20rpx 0;
  border-radius: 12rpx;
}

.tab.active {
  color: #07c160;
  background-color: rgba(7, 193, 96, 0.1);
}

.form-container {
  background-color: white;
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
}

.input-wrapper {
  margin-bottom: 30rpx;
}

.input-group {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #eee;
}

.input-icon {
  width: 60rpx;
  text-align: center;
  font-size: 32rpx;
  color: #999;
  margin-right: 10rpx;
}

input {
  flex: 1;
  font-size: 28rpx;
  height: 60rpx;
  color: #333;
}

.input-placeholder {
  color: #aaa;
}

.code-group {
  position: relative;
}

.get-code-btn {
  position: absolute;
  right: 0;
  top: 24rpx;
  color: #07c160;
  font-size: 26rpx;
  padding: 0 10rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 8rpx;
}

.get-code-btn.disabled {
  color: #999;
}

.remember-me {
  padding: 20rpx 0;
  font-size: 26rpx;
  color: #666;
}

checkbox {
  transform: scale(0.8);
  margin-right: 10rpx;
}

.login-btn {
  margin-top: 40rpx;
  background: linear-gradient(90deg, #07c160, #05a854);
  color: white;
  height: 96rpx;
  line-height: 96rpx;
  border-radius: 48rpx;
  font-size: 34rpx;
  text-align: center;
  box-shadow: 0 6rpx 20rpx rgba(7, 193, 96, 0.3);
}

.login-btn-text {
  font-weight: 500;
}

.extra-options {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
}

.extra-options navigator {
  color: #666;
  font-size: 26rpx;
}
</style>
